<template>
	<view>
		<u-loading-page :loading="isLoadPage" loading-color="#ff8763" color="#ff8763" loading-mode="spinner"
			font-size="12" loading-text="玲玲影视正在为您加载..."></u-loading-page>
		<view v-if="!isLoadPage">
			<view style="margin: 10px;">
				<u-swiper :list="carouselList" keyName="image" height="175" indicator indicatorMode="dot" circular
					showTitle @click="toVodDetail"></u-swiper>
			</view>
			<u-notice-bar text="温馨提示: 请勿相信视频中的广告内容!" speed="120" color="#ff8763"></u-notice-bar>
			<view>
				<view style="margin: 5px 0px 5px 10px;display: flex;flex-direction: row;align-items: center;">
					<u-col span="9" style="display: flex;flex-direction: row;align-items: center;">
						<view style="font-size: 18px;font-weight: 700;">今日推荐</view>
					</u-col>
					<u-col span="3">
						<view style="margin-right: 10px;">
							<u-button text="换一批" size="small" shape="circle" @click="toChangeTjVodList"></u-button>
						</view>
					</u-col>
				</view>
				<vod-page :vodList="vodTjList"></vod-page>
			</view>
			<view v-if="typeId == 0">
				<view style="margin: 0px 0px 5px 10px;display: flex;flex-direction: row;align-items: center;">
					<u-col span="9" style="display: flex;flex-direction: row;align-items: center;">
						<view style="font-size: 18px;font-weight: 700;">猜你喜欢</view>
					</u-col>
					<u-col span="3">
						<view style="margin-right: 10px;">
							<u-button text="换一批" size="small" shape="circle" @click="toChangeVodGuessList"></u-button>
						</view>
					</u-col>
				</view>
				<vod-card :vodList="vodGuessList"></vod-card>
			</view>

			<view v-for="item in labelVodList">
				<view style="margin: 0px 0px 5px 10px;display: flex;flex-direction: row;align-items: center;">
					<u-col span="9" style="display: flex;flex-direction: row;align-items: center;">
						<view style="font-size: 18px;font-weight: 700;">{{item.type.typeName}}</view>
					</u-col>
					<u-col span="3">
						<view style="margin-right: 10px;">
							<u-button text="换一批" size="small" shape="circle" @click="toChangeVodList(item)"></u-button>
						</view>
					</u-col>
				</view>
				<vod-page :vodList="item.vodList"></vod-page>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getVodCarousel,
		getLableVodList,
		getVodRecommend,
		getVodGuess
	} from '../../config/api.js';
	import vodpage from '../../pages/list/list.vue';
	import vodcard from '../../pages/card/card.vue';

	export default {
		components: {
			'vod-page': vodpage,
			"vod-card": vodcard
		},
		props: {
			typeId: {},
		},
		data() {
			return {
				isLoadPage: true,
				carouselList: [],
				carouselVodList: [],
				vodTjList: [],
				vodGuessList: [],
				labelVodList: [],
				showLoading: false
			}
		},
		mounted() {
			setTimeout(() => {
				this.isLoadPage = false;
			}, 200)
		},
		created() {
			this.findCarousel();
			this.findTjVodPage();
			this.findLabelVodList();
			if (this.typeId == 0) {
				this.findGuessVodPage();
			}


		},
		methods: {
			//推荐
			findTjVodPage() {
				var that = this
				let typeId = this.typeId == 0 ? '' : this.typeId
				// get请求
				getVodRecommend("?typePid=" + typeId).then((res) => {
					that.vodTjList = res
				}).catch(() => {

				})
			},
			findCarousel() {
				// get请求
				let typeId = this.typeId
				getVodCarousel("?typePid=" + typeId).then((res) => {
					res.forEach((item) => {
						let obj = {
							"image": item.vodPic,
							"title": item.vodName,
							"vodId": item.vodId
						}
						this.carouselList.push(obj);
					})
					this.carouselVodList = res;
				}).catch(() => {

				})
			},
			//猜你喜欢
			findGuessVodPage() {
				var that = this
				// get请求
				getVodGuess("?size=6").then((res) => {
					that.vodGuessList = res
				}).catch(() => {

				})
			},
			//电影 电视剧
			findLabelVodList() {
				var that = this
				this.showLoading = true
				// get请求
				getLableVodList("?typePid=" + this.typeId).then((res) => {
					that.labelVodList = res
					this.showLoading = false
				}).catch(() => {

				})
			},
			toPage(item) {
				uni.$u.route({
					url: 'pages/detail/detail',
					params: {
						vodId: item.vodId

					}
				})
			},
			toVodDetail(index) {
				if (uni.getStorageSync('playerSet') == 1) {
					uni.$u.route({
						url: 'pages/dplayer/dplayer',
						params: {
							vodInfo: encodeURIComponent(JSON.stringify(this.carouselVodList[index]))
						}
					})
				} else {
					uni.$u.route({
						url: 'pages/detail/detail',
						params: {
							vodInfo: encodeURIComponent(JSON.stringify(this.carouselVodList[index]))
						}
					})
				}


			},
			toChangeVodList(item) {
				var that = this
				let params = this.typeId == 0 ? "?typePid=" + item.type.typeId + "&t=" + new Date().getTime() :
					"?typeId=" + item.type.typeId + "&t=" + new Date().getTime()
				// get请求
				getVodRecommend(params).then((res) => {
					item.vodList = res
				}).catch(() => {

				})
			},
			toChangeTjVodList() {
				var that = this
				let typeId = this.typeId == 0 ? '' : this.typeId
				// get请求
				getVodRecommend("?typePid=" + typeId + "&t=" + new Date().getTime()).then((res) => {
					that.vodTjList = res
				}).catch(() => {

				})
			},
			toChangeVodGuessList() {
				var that = this
				let typeId = this.typeId == 0 ? '' : this.typeId
				// get请求
				getVodRecommend("?typePid=" + typeId + "&t=" + new Date().getTime()).then((res) => {
					that.vodGuessList = res
				}).catch(() => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.label {
		margin: 10px;
		font-weight: 550;
	}

	/deep/ .u-button--small {
		min-width: 60px;
		height: 28px;
		padding: 0px 10px;
		font-size: 12px;
	}
</style>
